/**
 * @author zhangqiang
 * @data 2017/3/14
 *  订单详情
 * */
import React, { Component } from 'react'
import { connect } from 'react-redux'
import {Tabs, WhiteSpace } from 'antd-mobile'
import style from './index.scss'
import {Progress} from '../../components/common'
import OrderList from '../../components/orderDetails/index'
import {Title} from '../../components/common'
import '../../../styles/orderDetails.scss';
import {getOrderDetails} from '../../actions/orderDetailsActions'
import common from '../../utils/common'

class OrderDetails extends Component {
	constructor(props) {
		super(props)
		this.state = {
			data: ''  //详情页数据
		}
		this.chargeId = this.props.params.chargeId
		this.orderId = this.props.params.orderId
		this.type = this.props.params.type
	}



	componentWillMount() {
		let getData={
			chargeOrderId: this.chargeId,
			orderId: this.orderId
		}
		this.props.dispatch(getOrderDetails(getData))
	}

	componentDidMount() {
		common.setViewTitle('订单详情');
		window.scrollTo(0, 0);
	}

	toUrl(url) {
		this.context.router.push(url);
	}

	render() {
	  	let res = this.props.detailsData,
		 	fmtAll = 'yyyy-MM-dd hh:mm:ss',
			processTime = common.format(res.processTime,fmtAll),
		 	payTime = common.format(res.payTime,fmtAll),
		 	createTime = common.format(res.createTime,fmtAll),
		 	completeTime = common.format(res.completeTime,fmtAll),
			status = res.status==3||res.status==4||res.status==5;  //订单失败状态

		return (
			<div className={style.orderDetails}>
				{/*订单状态-start-*/}
				<Progress status={res.status}/>
				{/*订单状态-end-*/}
				<div style={{height: '.24rem'}}></div>

				<div className={style.orderState} >
					<img src={status?"./images/error_icon.png":"./images/success_icon.png"} alt=""/>
					<div style={status?{color: 'red'}:{color: '#00B488'}}>{res.statusName}</div>
					<p>{res.statusDescDetail}</p>
				</div>

				<div style={{height: '.24rem'}}></div>
				{/*订单列表-start-*/}

				<OrderList data={res} />

				{/*订单列表-end-*/}
				<div style={{height: '.38rem'}}></div>

				<div className={style.processProgress}>
					<div className={style.title+' '+'border_bottom_1'}>
						<i></i><span>办理进度</span>
						<div className={style.toDetail} onClick={()=>{this.toUrl(`handlingProgress/${this.orderId}/${this.chargeId}`)}}>
							<span>查看进度详情</span>
							<img src="./images/icon_to_r.png" alt=""/>
						</div>
					</div>

					<div className={style.currentProgress}>
						<div className={style.curretLine}>
							<img src="./images/icon_success.png" alt=""/>
							<div className={style.text_s}>{res.processTitle}</div>
							<div className={style.time_d}>{processTime}</div>
						</div>
					</div>
				</div>

				<div style={{height: '.24rem'}}></div>

				<div className={style.handleProcess}>
					<Title text='办理说明' isLine={true}/>
					<div className={style.process}>
						<div className={style.processStyleAll+' '+style.xd_icon}>
							下单支付
						</div>
						<div className={style.processStyleAll+' '+style.sl_icon}>
							受理预约
						</div>
						<div className={style.processStyleAll+' '+style.sm_icon}>
							上门收证
						</div>
						<div className={style.processStyleAll+' '+style.ss_icon}>
							送审制证
						</div>
						<div className={style.processStyleAll+' '+style.cz_icon}>
							出证送达
						</div>
					</div>
				</div>

				<div style={{height: '.24rem'}}></div>

				<div className={style.details}>
					<Title text='订单详情' isLine={true}/>
					<div className={style.detailList}>
						<div className={style.msg}>
							<span>订单编号</span>
							<span>{res.orderId}</span>
						</div>
						<div className={style.msg}>
							<span>支付方式</span>
							<span>{res.payType==2?'支付宝':res.payType==3?'微信':null}</span>
						</div>
						<div className={style.msg}>
							<span>交易号</span>
							<span>{res.payNo}</span>
						</div>

						<div className={style.msg} style={!res.acceptanceNbr?{display: 'none'}:{}}>
							<span>受理号</span>
							<span>{res.acceptanceNbr}</span>
						</div>
						<div className={style.msg} style={!res.expressNbr ?{display: 'none'}:{}}>
							<span>快递单号</span>
							<span>{res.expressNbr}</span>
						</div>

						<div className={style.msg}>
							<span>创建时间</span>
							<span>{createTime}</span>
						</div>
						<div className={style.msg}>
							<span>支付时间</span>
							<span>{payTime}</span>
						</div>

						<div className={style.msg} style={!res.completeTime?{display: 'none'}:{}}> 
							<span>
								{
									res.status == 8?
									'完成时间':'关闭时间'
								}
							</span>
							<span>{completeTime}</span>
						</div>
					</div>
				</div>
				<div style={{height: '1.4rem'}}></div>

			</div>
		)
	}
}

//使用context
OrderDetails.contextTypes = {
	router: React.PropTypes.object.isRequired
};

OrderDetails.defaultProps = {
	detailsData:{},
	list:[]
};

function mapStateToProps(state) {
	return Object.assign({}, state.orderDetails);
}
export default connect(mapStateToProps)(OrderDetails)